<template>
  <div class="profile-container">
    <!-- 新增：顶部返回栏（固定在页面顶部，随滚动保持可见） -->
    <div class="top-nav-bar">
      <button class="back-btn" @click="handleGoBack" title="返回上一页">
        <i class="fa fa-chevron-left mr-1"></i>
        <span>返回</span>
      </button>
      <h1 class="page-title">个人中心</h1>
      <div class="empty-placeholder"></div> <!-- 占位，保持按钮和标题居中 -->
    </div>

    <!-- 个人信息头部（优化间距和视觉层次） -->
    <div class="profile-header">
      <!-- 封面图（降低高度，减少压迫感） -->
      <div class="profile-cover">
        <img :src="coverImage" alt="个人主页封面" class="cover-img">
        <button class="edit-cover-btn" @click="handleEditAvatar">
          <i class="fa fa-camera"></i>
          <span>更换封面</span>
        </button>
      </div>
      
      <!-- 个人信息区（优化头像与文字的对齐，增加留白） -->
      <div class="profile-info">
        <div class="avatar-section">
          <div class="avatar-container">
            <img :src="userAvatar" alt="用户头像" class="profile-avatar">
            <button class="edit-avatar-btn" @click="handleEditAvatar">
              <i class="fa fa-pencil"></i>
            </button>
          </div>
          
          <div class="user-status">
            <h2 class="user-name">{{ userInfo.name || userInfo.username }}</h2>
            <div v-if="userInfo.isVip" class="vip-tag">
              <i class="fa fa-diamond"></i>
              <span>高级会员</span>
            </div>
          </div>
        </div>
        
        <!-- 统计数据（优化间距，降低数字权重，避免视觉突兀） -->
        <div class="user-stats">
          <div class="stat-item">
            <div class="stat-value">{{ stats.worksCount }}</div>
            <div class="stat-label">作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.fansCount }}</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.likesCount }}</div>
            <div class="stat-label">获赞</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.starsCount }}</div>
            <div class="stat-label">收藏</div>
          </div>
        </div>
        
        <!-- 操作按钮（优化尺寸和颜色，增加呼吸感） -->
        <div class="action-buttons">
          <button class="btn primary-btn" @click="navigateTo('/settings')">
            <i class="fa fa-cog mr-1"></i> 编辑资料
          </button>
          <button class="btn secondary-btn" @click="handleShareProfile">
            <i class="fa fa-share-alt mr-1"></i> 分享主页
          </button>
        </div>
      </div>
    </div>
    
    <!-- 个人简介（增加卡片边框，优化文字行高） -->
    <div class="profile-bio card">
      <h2 class="section-title">个人简介</h2>
      <p class="bio-content">{{ userInfo.bio || '这位创作者很神秘，还没有填写简介' }}</p>
    </div>
    
    <!-- 作品标签（优化标签样式，增加hover反馈） -->
    <div class="profile-tags card">
      <h2 class="section-title">擅长风格</h2>
      <div class="tags-container">
        <span v-for="tag in userInfo.tags" :key="tag" class="tag-item">{{ tag }}</span>
        <button class="add-tag-btn" v-if="userInfo.tags.length < 5" @click="handleAddTag">
          <i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
    
    <!-- 作品展示区（优化卡片间距，降低阴影强度） -->
    <div class="profile-works">
      <div class="section-header">
        <h2 class="section-title">我的作品</h2>
        <button class="view-all-btn" @click="navigateTo('/works')">查看全部</button>
      </div>
      
      <div class="works-grid" v-if="userWorks.length > 0">
        <div v-for="work in userWorks" :key="work.id" class="work-card">
          <div class="work-cover" @click="navigateTo(`/works/${work.id}`)">
            <img :src="work.coverUrl" alt="作品封面: {{ work.title }}">
            <div class="play-btn">
              <i class="fa fa-play"></i>
            </div>
          </div>
          <h3 class="work-title">{{ work.title }}</h3>
          <div class="work-meta">
            <span class="work-type">{{ work.type }}</span>
            <span class="work-date">{{ formatDate(work.createdAt) }}</span>
          </div>
          <div class="work-stats">
            <span class="stat"><i class="fa fa-play"></i> {{ work.playCount }}</span>
            <span class="stat"><i class="fa fa-heart"></i> {{ work.likeCount }}</span>
          </div>
        </div>
      </div>
      
      <!-- 空状态（优化图标大小和文字间距） -->
      <div class="empty-state card" v-else>
        <i class="fa fa-music"></i>
        <p>还没有创作作品</p>
        <button class="create-btn" @click="navigateTo('/compose')">
          <i class="fa fa-plus mr-1"></i> 开始创作
        </button>
      </div>
    </div>
    
    <!-- 最近活动（优化列表项间距，增加分隔线对比度） -->
    <div class="profile-activities card">
      <div class="section-header">
        <h2 class="section-title">最近活动</h2>
        <button class="view-all-btn" @click="navigateTo('/activities')">查看全部</button>
      </div>
      
      <div class="activities-list" v-if="recentActivities.length > 0">
        <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
          <div class="activity-icon">
            <i :class="activity.iconClass"></i>
          </div>
          <div class="activity-content">
            <p class="activity-text">{{ activity.description }}</p>
            <p class="activity-time">{{ formatRelativeTime(activity.timestamp) }}</p>
          </div>
        </div>
      </div>
      
      <div class="empty-activity" v-else>
        <i class="fa fa-history"></i>
        <p>暂无活动记录</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 路由实例（新增：用于返回上一页）
const router = useRouter();
const route = useRoute();

// 用户信息（保持与导航栏一致的数据源）
const userInfo = ref({
  name: '音乐梦想家',
  username: 'music_dreamer',
  userId: '12345',
  isVip: localStorage.getItem('userVip') === 'true',
  bio: '热爱音乐创作的AI音乐制作人，擅长流行、电子和古典风格的音乐创作',
  tags: ['流行', '电子', '古典', '影视配乐']
});

// 统计数据（降低数字视觉权重，更柔和）
const stats = ref({
  worksCount: 12,
  fansCount: 258,
  likesCount: 1356,
  starsCount: 324
});

// 封面和头像（优化尺寸比例，更协调）
const coverImage = ref('https://picsum.photos/id/1076/1200/240'); // 降低封面高度
const userAvatar = ref(`https://picsum.photos/id/${Number(userInfo.value.userId) || 64}/200`);

// 用户作品（保持数据结构不变）
const userWorks = ref([
  {
    id: 1,
    title: '夏日微风',
    type: 'AI作曲',
    coverUrl: 'https://picsum.photos/id/1082/300/300',
    playCount: 1253,
    likeCount: 238,
    createdAt: '2025-09-15'
  },
  {
    id: 2,
    title: '城市夜景',
    type: '音乐改编',
    coverUrl: 'https://picsum.photos/id/1067/300/300',
    playCount: 847,
    likeCount: 156,
    createdAt: '2025-09-10'
  },
  {
    id: 3,
    title: '追梦路上',
    type: '歌词生成',
    coverUrl: 'https://picsum.photos/id/1071/300/300',
    playCount: 632,
    likeCount: 98,
    createdAt: '2025-09-05'
  }
]);

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    description: '发布了新作品《夏日微风》',
    iconClass: 'fa fa-music',
    timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000 // 3天前
  },
  {
    id: 2,
    description: '获得了100个新粉丝',
    iconClass: 'fa fa-users',
    timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 // 7天前
  },
  {
    id: 3,
    description: '作品《城市夜景》登上热门榜',
    iconClass: 'fa fa-star',
    timestamp: Date.now() - 10 * 24 * 60 * 60 * 1000 // 10天前
  }
]);

// 新增：返回上一页功能（优先返回历史记录，无历史则跳首页）
const handleGoBack = () => {
  if (window.history.length > 1) {
    router.back();
  } else {
    router.push('/home');
  }
};

// 导航方法（保持不变）
const navigateTo = (path) => {
  router.push(path).catch(err => {
    console.error('导航失败：', err);
    alert('页面跳转失败，请刷新页面重试');
  });
};

// 格式化日期（保持不变）
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'short', 
    day: 'numeric' 
  });
};

// 格式化相对时间（保持不变）
const formatRelativeTime = (timestamp) => {
  const now = Date.now();
  const diff = now - timestamp;
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  
  if (seconds < 60) return `${seconds}秒前`;
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 30) return `${days}天前`;
  
  return formatDate(new Date(timestamp));
};

// 功能方法（保持不变）
const handleEditAvatar = () => {
  alert('功能开发中：更换头像');
};
const handleEditCover = () => {
  alert('功能开发中：更换封面');
};
const handleAddTag = () => {
  const newTag = prompt('请输入新的音乐风格标签：');
  if (newTag && newTag.trim() && !userInfo.value.tags.includes(newTag.trim())) {
    userInfo.value.tags.push(newTag.trim());
  }
};
const handleShareProfile = () => {
  alert('个人主页链接已复制到剪贴板');
};

// 页面加载初始化（保持不变）
onMounted(() => {
  const storedUser = localStorage.getItem('currentUser');
  if (storedUser) {
    const user = JSON.parse(storedUser);
    userInfo.value = { ...userInfo.value, ...user };
  }
  const worksCount = localStorage.getItem('userWorksCount');
  if (worksCount) {
    stats.value.worksCount = Number(worksCount);
  }
});
</script>

<style scoped>
/* 主题变量继承（保持与Layout一致） */

/* 容器样式（优化整体间距，增加页面呼吸感） */
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem; /* 优化上下间距 */
}

/* 新增：顶部返回栏（固定定位，随滚动保持可见） */
.top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color); /* 增加边框，提升层次 */
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(8px); /* 毛玻璃效果，更轻盈 */
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.back-btn:hover {
  background: var(--bg-hover);
}

.page-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
}

.empty-placeholder {
  width: 80px; /* 与back-btn宽度一致，保持标题居中 */
}

/* 头部封面（降低高度，减少视觉压迫） */
.profile-header {
  margin-bottom: 1.8rem;
}

.profile-cover {
  position: relative;
  width: 100%;
  height: 180px; /* 原200px，降低高度更轻盈 */
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: -50px; /* 优化头像重叠距离 */
  z-index: 1;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.profile-cover:hover .cover-img {
  transform: scale(1.02);
}

.edit-cover-btn {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: rgba(0, 0, 0, 0.4); /* 降低透明度，减少遮挡 */
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
  backdrop-filter: blur(4px);
}

.edit-cover-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* 个人信息区（优化间距和对齐） */
.profile-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 1.2rem;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border-color); /* 增加边框，提升层次 */
  margin-bottom: 1.8rem;
  z-index: 2;
  position: relative;
}

.avatar-section {
  display: flex;
  align-items: center; /* 垂直居中，更协调 */
  gap: 1.2rem;
}

.avatar-container {
  position: relative;
  width: 100px; /* 原120px，缩小头像，减少压迫感 */
  height: 100px;
  border: 3px solid var(--bg-secondary); /* 减薄边框 */
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar-container:hover .profile-avatar {
  transform: scale(1.05);
}

.edit-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px; /* 原36px，缩小按钮 */
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: 2px solid var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.edit-avatar-btn:hover {
  background: var(--primary-hover);
}

.user-status {
  padding-bottom: 0.5rem; /* 减少底部留白 */
}

.user-name {
  margin: 0 0 0.3rem 0; /* 减少标题下方间距 */
  font-size: 1.5rem; /* 原1.8rem，缩小字号，更柔和 */
  color: var(--text-primary);
}

.vip-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(245, 158, 11, 0.1);
  color: var(--vip-color);
  padding: 0.2rem 0.7rem;
  border-radius: 18px;
  font-size: 0.85rem; /* 缩小字号 */
  font-weight: 500;
}

/* 统计数据（降低视觉权重） */
.user-stats {
  display: flex;
  gap: 1.5rem;
  margin: 0 1.5rem 0.5rem 0; /* 减少底部留白 */
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.3rem; /* 原1.5rem，缩小数字，降低权重 */
  font-weight: 500; /* 降低加粗程度 */
  color: var(--primary-color);
  margin: 0 0 0.1rem 0; /* 减少下方间距 */
}

.stat-label {
  font-size: 0.85rem; /* 原0.9rem，缩小字号 */
  color: var(--text-tertiary);
  margin: 0;
}

/* 操作按钮（优化尺寸和颜色） */
.action-buttons {
  margin-left: auto;
  display: flex;
  gap: 0.8rem; /* 减少按钮间距 */
  margin-bottom: 0.5rem; /* 减少底部留白 */
}

.btn {
  padding: 0.5rem 1rem; /* 缩小按钮内边距 */
  border-radius: 6px;
  font-size: 0.9rem; /* 缩小字号 */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease; /* 加快过渡，更灵敏 */
  display: flex;
  align-items: center;
  border: none;
}

.primary-btn {
  background: var(--primary-color);
  color: white;
}

.primary-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px); /* 减少上浮距离，更克制 */
}

.secondary-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.secondary-btn:hover {
  background: var(--bg-secondary);
  transform: translateY(-1px);
}

/* 通用卡片样式（统一所有模块的视觉风格） */
.card {
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border-color); /* 增加边框，提升层次 */
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.8rem;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 轻微阴影，更轻盈 */
}

/* 个人简介（优化文字行高） */
.section-title {
  font-size: 1.1rem; /* 原1.3rem，缩小标题字号 */
  color: var(--text-primary);
  margin: 0 0 0.8rem 0; /* 减少下方间距 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title::before {
  content: '';
  display: inline-block;
  width: 3px; /* 减薄装饰线 */
  height: 1rem; /* 缩短装饰线 */
  background: var(--primary-color);
  border-radius: 2px;
}

.bio-content {
  color: var(--text-secondary);
  line-height: 1.7; /* 增加行高，提升可读性 */
  margin: 0;
  font-size: 0.95rem; /* 优化字号 */
}

/* 作品标签（优化样式和反馈） */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.tag-item {
  background: var(--bg-hover);
  color: var(--text-secondary);
  padding: 0.4rem 1rem;
  border-radius: 18px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tag-item:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px); /* 减少上浮距离 */
}

.add-tag-btn {
  width: 30px; /* 缩小按钮 */
  height: 30px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-tertiary);
  border: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-tag-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* 作品展示区（优化卡片间距和阴影） */
.profile-works {
  margin-bottom: 1.8rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.view-all-btn {
  color: var(--primary-color);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s ease;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

.view-all-btn:hover {
  color: var(--primary-hover);
  background: var(--bg-hover); /* 增加hover背景，更明显 */
  text-decoration: none; /* 移除下划线，更简洁 */
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 调整卡片宽度 */
  gap: 1.2rem; /* 优化间距 */
}

.work-card {
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border-color); /* 增加边框 */
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.work-card:hover {
  transform: translateY(-2px); /* 减少上浮距离，更克制 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); /* 降低阴影强度 */
}

.work-cover {
  position: relative;
  width: 100%;
  height: 140px; /* 原160px，降低高度 */
  overflow: hidden;
}

.work-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.work-card:hover .work-cover img {
  transform: scale(1.03); /* 减少缩放程度 */
}

.play-btn {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  width: 32px; /* 缩小按钮 */
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px); /* 减少位移 */
  transition: all 0.2s ease;
}

.work-card:hover .play-btn {
  opacity: 1;
  transform: translateY(0);
}

.work-title {
  font-size: 0.95rem; /* 优化字号 */
  margin: 0.8rem 1rem 0.4rem; /* 优化间距 */
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-meta {
  display: flex;
  justify-content: space-between;
  margin: 0 1rem 0.4rem;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.work-stats {
  display: flex;
  gap: 0.8rem; /* 减少间距 */
  margin: 0 1rem 0.8rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* 最近活动（优化列表项和分隔线） */
.profile-activities {
  margin-bottom: 1.8rem;
}

.activities-list {
  padding: 0.5rem 0; /* 增加内边距 */
}

.activity-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0; /* 优化内边距 */
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background: var(--bg-hover);
}

.activity-icon {
  width: 36px; /* 缩小图标容器 */
  height: 36px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.08); /* 降低背景强度 */
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem; /* 缩小图标 */
}

.activity-content {
  flex-grow: 1;
}

.activity-text {
  margin: 0 0 0.2rem 0; /* 减少间距 */
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.activity-time {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* 空状态（优化图标和文字） */
.empty-state {
  padding: 2.5rem 1.5rem; /* 优化内边距 */
  text-align: center;
  color: var(--text-tertiary);
}

.empty-state i {
  font-size: 2.5rem; /* 缩小图标 */
  margin-bottom: 0.8rem;
  color: var(--border-color);
}

.empty-state p {
  margin: 0 0 1.2rem 0; /* 优化间距 */
  font-size: 1rem; /* 优化字号 */
}

.create-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.2rem; /* 优化内边距 */
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.create-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* 活动空状态（单独优化） */
.empty-activity {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-tertiary);
}

.empty-activity i {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  color: var(--border-color);
}

.empty-activity p {
  margin: 0;
  font-size: 1rem;
}

/* 响应式优化（更细腻的适配） */
@media (max-width: 1024px) {
  .profile-container {
    padding: 1rem 1.2rem 2.5rem;
  }
  
  .user-stats {
    gap: 1.2rem;
  }
}

@media (max-width: 768px) {
  .profile-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .avatar-section {
    width: 100%;
  }
  
  .user-stats {
    width: 100%;
    margin: 0 0 0.8rem 0;
    justify-content: space-around; /* 移动端均匀分布 */
  }
  
  .action-buttons {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  
  .btn {
    flex-grow: 1;
    justify-content: center;
    margin: 0 0.2rem;
  }
  
  .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: 0.8rem 0.8rem 2rem;
  }
  
  .top-nav-bar {
    padding: 0.6rem 0.8rem;
  }
  
  .page-title {
    font-size: 1.1rem;
  }
  
  .profile-cover {
    height: 140px;
  }
  
  .avatar-container {
    width: 90px;
    height: 90px;
  }
  
  .user-name {
    font-size: 1.3rem;
  }
  
  .user-stats {
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  
  .stat-item {
    flex-basis: 45%;
    margin-bottom: 0.3rem;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .works-grid {
    grid-template-columns: 1fr;
  }
  
  .activity-item {
    gap: 0.8rem;
  }
}
</style>